import React from 'react';
import PropTypes from 'prop-types';
import styles from './AnnotationToolbar.module.css';

const TOOL_CONFIG = [
  { id: 'rectangle', label: '方框标注', icon: '⬜', description: '用于创建矩形标注框' },
  { id: 'mouse', label: '选择工具', icon: '🖱️', description: '用于调整、拖动和选择标注框' },
  { id: 'eraser', label: '橡皮擦', icon: '🧹', description: '用于删除标注框' }
];

const AnnotationToolbar = ({ selectedTool, onToolSelect }) => {
  return (
    <div className={styles.toolbar} role="toolbar" aria-label="标注工具栏">
      {TOOL_CONFIG.map(tool => (
        <button
          key={tool.id}
          className={`${styles.toolButton} ${selectedTool === tool.id ? styles.active : ''}`}
          onClick={() => onToolSelect(tool.id)}
          title={tool.label}
          aria-label={tool.description}
          aria-pressed={selectedTool === tool.id}
        >
          <span className={styles.toolIcon}>{tool.icon}</span>
        </button>
      ))}
    </div>
  );
};

AnnotationToolbar.propTypes = {
  selectedTool: PropTypes.oneOf(['rectangle', 'mouse', 'eraser']).isRequired,
  onToolSelect: PropTypes.func.isRequired
};

export default AnnotationToolbar; 